<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="../css/reg.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header bancen">
        <a href="../pages/index.html" class="logo"></a>
        <div class="logo-txt">欢迎注册</div>
        <a href="../pages/login.html" class="login">我已经注册，马上登录></a>
    </div>

    <!-- 注册表单 -->
    <div class="main">
        <form action="">
            <div class="reg-form">
                <!-- 礼物 -->
                <div class="gift-pkg">
                    <i></i>
                    注册领
                    <em style="color: red;">199</em>
                    元大礼包
                </div>
                <!-- 用户名 -->
                <div class="user-field">
                    <div class="input-box" name="input-box">
                        <label for="" class="title">用户名:</label>
                        <!-- 这是输入的框 -->
                        <div class="input-wrapper">
                            <input name="name" class="input-use" type="text" aria-label="请输入您常用的手机号" placeholder="请输入用户名"
                                onfocus="this.placeholder=''" onblur="this.placeholder='请输入用户名'">
                            <!-- <label class="placeholder">请输入用户名</label> -->
                        </div>
                    </div>
                </div>

                <!-- 提示 -->
                <span name="spanName" class="spanName"></span>

                <!-- 密码 -->
                <div class="password-field">
                    <div class="input-box" name="input-box">
                        <label for="" class="title">密码:</label>
                        <!-- 这是输入的框 -->
                        <div class="input-wrapper">
                            <input name="pwd1" class="input-use" type="password" aria-label="请输入您常用的手机号" placeholder="请输入密码"
                                onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'">
                            <!-- <label class="placeholder">请输入用户名</label> -->
                        </div>
                    </div>
                </div>
                <!-- 信息提示 -->
                <span class="spanPwd" name="spanPwd"></span>

                <!-- 再次密码 -->
                <div class="password-two-field">
                    <div class="input-box" name="input-box">
                        <label for="" class="title">确认密码:</label>
                        <!-- 这是输入的框 -->
                        <div class="input-wrapper">
                            <input name="pwd2" class="input-use" type="password" aria-label="请输入您常用的手机号" placeholder="请输入密码"
                                onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'">
                            <!-- <label class="placeholder">请输入用户名</label> -->
                        </div>
                    </div>
                </div>
                <!-- 信息提示 -->
                <span class="spanPwd" name="spanPwd"></span>

                <!-- 验证码 -->
                <div class="password-two-field">
                    <div class="input-box" name="input-box">
                        <label for="" class="title">输入验证码：</label>
                        <!-- 这是输入的框 -->
                        <div class="input-wrapper" style="width: 142px;">
                            <input name="vc" id="ac" class="input-use" type="text" aria-label="请输入您常用的手机号" placeholder="请输入验证码"
                                onfocus="this.placeholder=''" onblur="this.placeholder='请输入验证码'">
                            <!-- <label class="placeholder">请输入用户名</label> -->
                        </div>
                        <!-- 验证码按钮 -->
                        <a href="" class="send-msg" id="sc">获取短信验证码</a>
                    </div>
                </div>
                <span name="spanVC" class="spanspan"></span>

                <!-- 注册按钮 -->
                <!-- 在href加的代码是为了禁止a标签刷新页面 -->
                <a href="javascript:void(0)" class="submit-btn" name="reg" type="button">提交注册</a>
            </div>
        </form>
        <div class="result" name="result"></div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <img src="../img/footer.png" alt="">
    </div>


    <script src="../tools/jquery.min.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/ajax.js"></script>
    <script>
        // 获取焦点
        // $('.input-use').focus(function(){
        //     console.log(111);
        //     $('.placeholder').css('display', 'none');
        // })

        // $('.input-box').blur(function(){
        //     console.log(111);
        //     $('.this').css('display', 'block');
        // })


    </script>


    <!--  -->
    <script>
        // 1, 生成随机验证码
        $('#sc').click().html(setVC()).click(function () { $('#sc').html(setVC()) })

        // 2, 账号input 添加 change 事件
        $('[name="name"]').change(function () {
            // 发送 ajax请求 验证账号是不是重复
            // 调用 async封装的函数程序
            userNameAuthentication();
        })

        // 3, 注册button按钮 点击 执行注册操作
        $('[name="reg"]').click(function () {
            // 调用 async 封装的函数 执行注册操作
            setRegister();
        })


        // async 封装验证用户用函数
        async function userNameAuthentication() {
            // 获取账号input中输入的数据
            let name = $('[name="name"]').val();
            // 根据数据 发送请求
            // 变量res中存储的是 
            const res = await myPromiseAjax('../server/goods_select.php', 'post', { userName: name }, 'json');
            console.log(res);
            // 根据结果 向页面写入提示信息
            if (res.result === 0) {
                $('[name="spanName"]').html('<span style="color:red">用户名重复不能使用</span>')
            } else if (res.result === 1) {
                $('[name="spanName"]').html('<span style="color:blue">用户名可以使用</span>')
            }

        }

        // async 封装注册功能函数
        async function setRegister() {
            // 获取 账号 密码1 密码2 验证码数据 验证码内容
            let name = $('[name="name"]').val();
            let pwd1 = $('[name="pwd1"]').val();
            let pwd2 = $('[name="pwd2"]').val();
            let vc1 = $('[name="vc"]').val();
            let vc2 = $('#sc').html();

            // 如果 两个密码不同 写入提示信息 终止之后程序的执行
            // 如果 密码相同 删除错误提示信息
            if (pwd1 !== pwd2) {
                // 两个密码不同 写入错误提示信息
                $('[name="spanPwd"]').html('<span style="color:red">两个密码不同</span>');
                // 写入新的验证码
                $('#sc').html(setVC());
                // 触发 return 终止之后程序的执行
                // 也就是之后的ajax请求 就不发送了
                return;
            } else {
                // 两个密码相同 写入 空字符串 覆盖之前写入的提示信息
                $('[name="spanPwd"]').html('');
            }

            // 验证码 如果 区分字符的大小写 直接 比较判断 
            // 如果不区分字符大小写 字符串的大小写统一
            if (vc1.toLowerCase() !== vc2.toLowerCase()) {
                // 如果两个验证码不同 写入错误提示信息
                $('[name="spanVC"]').html('<span style="color:red">验证码不同</span>');
                // 写入新的验证码
                $('#sc').html(setVC());
                // 触发 return 终止之后程序的执行
                // 也就是之后的ajax请求 就不发送了
                return;
            } else {
                // 如果两个验证码相同 写入空字符串 覆盖错误提示信息
                $('[name="spanVC"]').html('');
            }

            // 发送ajax请求
            const res = await myPromiseAjax('../server/goods_reg.php', 'post', { userName: name, userPwd: pwd1 }, 'json');
            console.log(res);

            // 根据结果动态生成页面
            // 写入内容 5秒后跳转 首页面 点击 超链接 跳转 登录页
            if (res.result === 1) {
                // 注册成功 5秒跳转效果
                $('[name="result"]').html('<h1 style="color:blue">注册成功,5秒跳转首页面,<a href="./login.html">点击跳转登录页</a></h1>');
                $('.reg-form').css('display', 'none');

                let num = 5;
                let time = setInterval(function () {
                    num--;
                    $('[name="result"]').html(`<h1 style="color:blue">注册成功,${num}秒跳转首页面,<a href="./login.html">点击跳转登录页</a></h1>`);

                    if (num === 1) {
                        clearInterval(time);
                        window.location.href = './index.html';
                    }

                }, 1000)

            } else if (res.result === 0) {
                // 注册失败 写入提示信息
                $('[name="result"]').html('<h1 style="color:red">您注册的账号名重复</h1>');
            }
        }


    </script>
</body>

</html>